<%@page import="com.sun.glass.ui.Application"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.entity.Student"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.LinkedHashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<% 
	List<Student> stdList = (List<Student>)application.getAttribute("stdList");

%>
<%!
	int getCount(List<Student> stdList,String sex){
		int count = 0;
		if( stdList != null && stdList.size() > 0){
			for(Student std: stdList){
				if(sex != null && sex.equals(std.getSex())  ){
					count++;
				}
			}
		}
		return count;
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="<%=request.getContextPath()%>/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/popper.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<title>信息统计</title>
</head>

<body >
	
	<div class="card " style="width: 100%;height:100%;">
		<div class="card-header bg-primary text-white">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-6">
					<h3>学生信息统计</h3>
					</div>
					
				</div>
			</div>
		</div>
		<div class="card-body" style="overflow: auto;">
			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-12 col-md-5 border border-primary rounded mx-auto ml-1 mr-1" id="container"  style="align-content: center;min-height: 400px;" >
					
					</div>
					<div class="col-sm-12 col-md-6 border border-primary rounded ml-1 mr-1">
					<table class="table table-striped table-hover mt-3">
						<thead class="bg-secondary text-white">
							<tr>
								<td>学号</td>
								<td>姓名</td>
								<td>性别</td>
								<td>兴趣爱好</td>
							</tr>
						</thead>
						<tbody >
						<%
							if( stdList != null){
								for(Student std : stdList){
									String likeStr = "";
									if( std.getLike() != null ){
										likeStr = String.join(",", std.getLike());
									}
						%>
							
							<tr class="std-tr">
								<td><%=std.getNumber() %></td>
								<td><%=std.getName() %></td>
								<td><%=std.getSex() %></td>
								<td><%=likeStr%></td>
							</tr>
							
						<%
								}
							}
						%>
						</tbody>
					</table>
					
					</div>
				</div>
			</div>
		</div>
		<div class="card-footer bg-info text-center">
			
		</div>
	</div>
<script type="text/javascript">
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	option = {
	    title : {
	        text: '学生性别分布',
	        subtext: '饼图',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        bottom: 'bottom',
	        data: ['男','女']
	    },
	    series : [
	        {
	            name: '性别占比',
	            type: 'pie',
	            radius : '60%',
	            center: ['50%', '50%'],
	            data:[
	                {value:<%=getCount(stdList,"男")%>, name:'男',itemStyle:{color:"#7766dd"}},
	                {value:<%=getCount(stdList,"女")%>, name:'女',itemStyle:{color:"#dd4555"}}
	            ],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};
	;
	if (option && typeof option === "object") {
	    myChart.setOption(option, true);
	}
	myChart.on("mouseover",function(params){
		console.log(params);
		var sex = params.data.name;
		console.log(sex);
		$("tr").css("background-color","");
		$("tr").removeClass("text-white");
		$("td:contains('"+sex+"')").parent().css("background-color",params.color);
		$("td:contains('"+sex+"')").parent().addClass("text-white");
	})
	myChart.on("mouseout",function(params){
		$("tr").css("background-color","");
		$("tr").removeClass("text-white");
	})
       </script>

</body>
</html>